<!-- 安全角色（Modal） -->
<div class="modal fade" id="rolesModal" tabindex="-1" role="dialog"
     aria-labelledby="rolesModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">
                    ×
                </button>
                <h4 class="modal-title" id="rolesModalLabel">
                    <span class="glyphicon glyphicon-th"></span> 安全角色
                </h4>
            </div>
            <div class="modal-body">
                <p>正在设置 {{objectlen}} 个对象的角色<span class="text-danger">（批量操作时将重置已分配的角色）</span></p>
                <div class="table-responsive" id="gridview" style="max-height:350px;">
                    <table class="table table-striped table-hover table-condensed" id="datatable" data-ajax="true"
                           data-ajaxcontainer="gridview" data-ajaxcallback="ajaxgrid_reset()" data-sortby="createdon"
                           data-sortdirection="1" data-singlemode="False">
                        <thead>
                        <tr>
                            <th width="2%"><input type="checkbox" name="checkall"/></th>
                            <th data-name="name">
                                名称
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in items">
                            <td><input type="checkbox" name="recordid" v-bind:value="item.roleid"/>
                            </td>
                            <td>{{item.name}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="panel-footer hide">
                        <div class="row">
                            <div id="page-text" class="col-sm-4">
                                {{page}}/{{totalpages}}页，共 {{totalitems}} 行
                            </div>
                            <div id="page-selection" class="col-sm-8" v-bind:data-total="totalpages"
                                 v-bind:data-page="page"></div>
                        </div>
                    </div>
                    <script src="/content/js/jquery.bootpag.min.js"></script>
                    <script src="/content/js/jquery.form.js"></script>
                    <script src="/content/js/vue.global.prod.js"></script>
                    <script>
                            var paramsModel = $.urlParamObj(decodeURIComponent($('#rolesModal').parent().attr('data-dialog')));
                            paramsModel.callback = decodeURIComponent($('#rolesModal').parent().attr('data-callback'));
                            var sendData = JSON.parse(decodeURIComponent($('#rolesModal').parent().attr('data-send')) || {});
                            var RolesModel = {
                                dialog: $('#rolesModal'),
                                dialogid: '#rolesModal',
                                pageUrl: $("#entityRecordsModal .datatable").attr('data-pageurl'),
                                callback: paramsModel.callback || assignRolesToUserCallback,
                                inputid: '',
                                sortby: 'name',
                                sortdir: '1',
                                page: 1,
                                pagesize: 1,
                                userid: sendData.userid || [],
                                teamid: sendData.teamid || [],
                                gridviewModel: {},
                                vueInstance: null,
                                init: function () {
                                    RolesModel.gridviewModel = {
                                        data() {
                                            return {
                                                items: [],
                                                page: 1,
                                                totalpages: 1,
                                                totalitems: 0,
                                                objectlen: RolesModel.userid.length > RolesModel.teamid.length ? RolesModel.userid.length : RolesModel.teamid.length,
                                            }
                                        },
                                        mounted() {
                                            this.getData();
                                        },
                                        methods: {
                                            getData() {
                                                var _this = this;
                                                //var url = '/api/security/role/list?statecode=true&page=' + RolesModel.page + '&pagesize=' + RolesModel.pagesize + '&sortby=' + RolesModel.sortby + '&sortdirection=' + RolesModel.sortdir;
                                                var url = '/api/security/role/list?statecode=true&getall=true';
                                                Xms.Web.GetJson(url, null, function (res) {
                                                    if (!res.IsSuccess) {
                                                        Xms.Web.Alert(false, res.ErrorMessage,
                                                            function () {
                                                                RolesModel.dialog_return();
                                                            },
                                                            function () {
                                                                RolesModel.dialog_return();
                                                            });
                                                        return;
                                                    }
                                                    var data = res.Content;
                                                    _this.items = data;
                                                    /*_this.items = data.items;
                                                    _this.page = data.currentpage;
                                                    _this.totalpages = data.totalpages;
                                                    _this.totalitems = data.totalitems;*/
                                                    //RolesModel.ajaxgrid_reset();
                                                    RolesModel.bindSelected();
                                                });
                                            }
                                        }
                                    };

                                    if (!RolesModel.vueInstance) {
                                        RolesModel.vueInstance = Vue.createApp(RolesModel.gridviewModel);
                                        RolesModel.vueInstance.mount(RolesModel.dialogid);
                                    }
                                },
                                bindSelected: function(){
                                    var url = '';
                                    var postData = {};
                                    if(RolesModel.userid.length == 1) {
                                        url = '/api/data/retrieve/multiplebyattribute';
                                        postData = {entityname: 'rolemembership', filter: [{'memberid': RolesModel.userid[0]},{'typecode': 1}]};
                                    }
                                    else if(RolesModel.teamid.length == 1){
                                        url = '/api/data/retrieve/multiplebyattribute';
                                        postData = {entityname: 'rolemembership', filter: [{'memberid': RolesModel.teamid[0]},{'typecode': 2}]};
                                    }
                                    if(url == '') return;
                                    Xms.Web.Post(url, postData, false, function (res) {
                                        var data = res.Content;
                                        $(data).each(function (i, n) {
                                            $(RolesModel.dialogid + " #datatable tbody tr").find('input[name=recordid][value=' + n.roleid + ']').prop('checked', true);
                                        });
                                    }, null, true, false);
                                },
                                ajaxgrid_reset: function () {
                                    RolesModel.pag_init();
                                    Xms.Web.DataTable($(RolesModel.dialogid + " #datatable"));
                                },
                                pag_init: function () {
                                    $(RolesModel.dialogid + ' #page-selection').bootpag({
                                        total: $(RolesModel.dialogid + ' #page-selection').attr('data-total')
                                        , maxVisible: 5
                                        , page: $(RolesModel.dialogid + ' #page-selection').attr('data-page')
                                        , leaps: false
                                        , prev: '&lsaquo;'
                                        , next: '&rsaquo;'
                                        , firstLastUse: true
                                        , first: '&laquo;'
                                        , last: '&raquo;'
                                    }).on("page", function (event, /* page number here */ num) {
                                        event.preventDefault();
                                        RolesModel.page = num;
                                        //RolesModel.gridviewModel.getData();
                                        return false;
                                    });
                                },
                                dialog_return: function () {
                                    var result = new Array();
                                    $(RolesModel.dialogid + " #datatable").find("input[name=recordid]:checked").each(function (i, n) {
                                        var obj = new Object();
                                        obj.id = $(n).val();
                                        obj.name = $(n).parent().next().text();
                                        result.push(obj);
                                    });
                                    console.log('result', result, RolesModel.callback);
                                    var dialog = $(RolesModel.dialogid);
                                    if (dialog.data().OpenDialogCallback) {
                                        dialog.data().OpenDialogCallback(result, RolesModel, RolesModel.inputid, RolesModel)
                                    } else {
                                        RolesModel.callback && RolesModel.callback(result, RolesModel, RolesModel.inputid);
                                    }
                                    //  RolesModel.callback(result, RolesModel);
                                    RolesModel.dialog.modal('hide');
                                    //Xms.Web.CloseDialog('#rolesModal');
                                }
                            };

                            $(function () {
                                //RolesModel.ajaxgrid_reset();
                                //$(RolesModel.dialogid + " #datatable").ajaxTable();
                                RolesModel.init();
                                RolesModel.dialog.modal({
                                    backdrop: 'static'
                                })
                                RolesModel.dialog.on('hidden.bs.modal', function () {
                                    Xms.Web.CloseDialog(RolesModel.dialogid);
                                });
                            });
                    </script>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                    <span class="glyphicon glyphicon-remove"></span>
                    关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="RolesModel.dialog_return()">
                    <span class="glyphicon glyphicon-ok"></span>
                    确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->